﻿/*初始化 ;
*---------------------------------*/
*
{
	margin: 0;
	padding: 0;
}
body 
{
	width: 100%;
	height: 100%;
	background: transparent radial-gradient(#fff,#f7f7f7);	
}
/*对header 宽、高、背景色的设置 ;
 *--------------------------------------------*/
.header
{
	width: 100%;
	height: 80px;
	background-color: #267fd0; 
}
/*该div是包含整个header的内容 在缩放时可使整个header居中 ;
 *-----------------------*/
.header-inner-div
{
	width: 1200px;
	height: 80px;
	margin: 0 auto;
	text-align: center;
}
/*E-Top 专属图标 ;
 *------------------------------*/
	/*以下几个定义是针对E-Top图标的内容的设置 ;
	 *---------------------*/

.fa.fa-icon
{
	width: 90px;
	height: 80px;
	padding-top: 14px;
}
/*"在线文档浏览系统"
 *----------------------*/
.title-text
{
	position: relative;
	top: -30px;
	left: -6px;
	font-size: 22px;
	color: #fff;
}
/*更多的信息 ，其实就只有返回首页、退出 ;
 *---------------------*/
		/*以下是对更多信息的描述 ;
		 *----------------------*/
.more-information
{
	position: relative;
	top: -40px;
	width: 300px;
	height: 40px;
	font-size: 17px;
	float: right;
	margin-right: 55px;
}
/*类名为more-information的div的span ;
 *-------------------------------*/
.more-information span 
{
	float: left;
	padding-right: 10px;
	padding-left: 10px;
}
.more-information a
{
	color: #111;
	text-decoration: none;
}
/*在网页首部的一个类名为exit的退出 ;
 *--------------------*/
/*以上是对header的定义 ;
 *-----------------------------------------------*/

/*网页的主体部分 ;
 *--------------------------------------*/
	/*网页主体外围的设置 、使整个主体能居中 ;
	 *---------------------*/
.out-div
{
	width: 900px;
	height: 800px;
	margin: 0 auto;
	text-align: center;
	margin-top: 40px;
	background-color: #EFEFEF;
	border-width: 4px;
	border-radius: 5px;
	box-shadow: 1px 1px 2px 2px rgba(0,0,0,0.2);
}
/* “修改信息” 提示字眼 ;
 *--------------------------------------*/
.prompt-text
{
	position: relative;
	left: 10px;
	top: 20px;
	width: 880px;
	height: 40px;
	background: transparent linear-gradient(#fff,#fdfdfd) repeat scroll 0% 0%;	
	box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.2);
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
}
/*在网页主体部分的一个类名为prompt-text的div中的标题2 ;
 *------------------------------*/
.prompt-text h2
{
	float: left;
	margin-top: 5px;
	margin-left: 20px;
	letter-spacing: 3px;
	color: #777;
}
/*该div用于放置网页主体的内容 、包含修改信息块 ;
 *--------------------------------- */
.page-main
{
	width: 850px;
	margin: 0 auto;
	text-align: center;
	margin-top: 40px;
}

/*修改块 ;
 *---------------------------*/
/*放置<h3>的标签<dl>的特殊定义 ;
 *-------------------------------*/
.h3-dl
{
	position: relative;
	top: 20px;
	left: 20px;
	width: 150px;
	height: 40px;
}
/*对在.h3-dl 的<h3>的定义 ;
 *---------------------------*/
.h3-dl h3
{
	float: left;
	color: #444;
}
/*主体中的表单<form>的设置 ;
 * 有关头像的更换 、密码的修改 、邮箱 、手机的更改都在这个表单中 ;
 *------------------------------*/
#modify-form
{
	position: relative;
	background: transparent radial-gradient(#fefefe,#fff);
	box-shadow: 0px 1px 1px 2px rgba(0,0,0,0.2);
}
/*头像修改 ;
 *-------------------*/
	/*头像修改框架  ;
	 *------------*/
#modify-form .portrait
{
	width: 850px;
	height: 210px;
	border-bottom: thin dashed lightgray;
}
/*头像预览  ;
 *----------------------*/
#myimage
{
	position: relative;
	left: 210px;
	top: 15px;
	width: 120px;
	height: 120px;
	background-color: #F9F9F9;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
	border: thin solid forestgreen;
}
/*头像查找按钮(本地查找) ;
 *------------------*/
#button-dl
{
	position: relative;
	left: 430px;
	top: -35px;
	width: 100px;
	height: 38px;
	font-size: 18px;
	font-family: charcoal;
	letter-spacing: 4px;
	line-height: 37px;
	background-color: #f9f9f9;
	border: thin solid #c1c1c1;
}
#button-dl:hover{background-color: lightskyblue;}
#file-type
{
	position: absolute;
	left: -2px;
	height: 38px;
	width: 100px;
	cursor: pointer;
	opacity: 0;
}
.tip
{
	position: relative;
	top: -70px;
	left: 260px;
}
.tip em
{
	color: #267FD0;
	font-size: 20px;
	padding-right: 8px;
}
#size
{
	position: relative;
	left: -210px;
	top: -21px;
}
#size em{color: forestgreen;}
#size code{color: #267FD0;}
/*密码的修改 ;
 *---------------------------*/
	/*密码修改框架 ;
	 *--------------*/
.password
{
	width: 850px;
	height: 200px;
	border-bottom: thin dashed lightgray;
}
/*文字的处理 ：“原密码 、新密码 、确认密码”  ;  
 *----------------*/
.password-text
{
	position: relative;
	left: 200px;
	top: 10px;
	width: 120px;
	height: 140px;
}
/*手机 、邮箱 、密码的修改的文字设置  ;
 *--------------------*/
.password-text span,
.safety-tool span
{
	float: right;
	clear: both;
	font-size: 17px;
	font-family: "bradley hand itc";
	line-height: 45px;
}
/*有关密码修改部分 ;
 *-----------------------------*/
.password-input
{
	position: relative;
	left: 320px;
	top: -130px;
	width: 380px;
	height: 130px;
	line-height: 43px;
}
/*密码修改 、安全信息修改中的input ;
 *----------------*/
.password-input input,
.safety-input input
{
	width: 330px;
	height: 30px;
	padding-left: 20px;
	font-size: 17px;
	border-radius: 5px;
	border: thin solid forestgreen;
}
.password-input input:focus,
.safety-input input:focus
{
	background-color: #FAFAFA;
}
/*安全信息的修改 ;
 *-----------------------------*/
.safety-information
{
	width: 850px;
	height: 170px;
	border-bottom: thin dashed lightgray;
}
/*这里定义的是修改信息部分的一类名为safety-tool的<dl> ;
 *----------------------------*/
.safety-tool
{
	position: relative;
	top: 20px;
	left: 200px;
	width: 120px;
	height: 80px;
}
/*这里定义的是修改信息部分的一类名为safety-input的<dl> ;
 *----------------------------*/
.safety-input
{
	position: relative;	
	left: 320px;
	top: -70px;
	width: 380px;
	height: 100px;
	line-height: 43px;
}
/*保存修改后的信息的按钮的框架 ;
 *------------------------------*/
.confirm-button-div
{
	width: 850px;
	height: 90px;	
}
/*保存修改后的信息的按钮 ;
 *---------------------*/
#confirm-button
{
	position: relative;
	left: 300px;
	top: 40px;
	width: 100px;
	height: 40px;
	font-size: 18px;
	font-family: "century gothic";
	cursor: pointer;
}
/*页脚部分的定义 ;
 *--------------------*/
.footer
{
	width: 900px;
	height: 80px;
	margin: 0 auto;
	text-align: center;
	margin-top: 20px;
	background-color: #F6F6F6;
	box-shadow: 0px 1px 1px 2px rgba(0,0,0,0.2);
}
.footer a
{
	position: relative;
	top: 40px;
	color: black;
}


